<template>
    <div class="menu-management">
        <el-card>
            <template #header>
                <div class="toolbar">
                    <el-button type="primary" @click="handleCreate">新增菜单</el-button>
                </div>
            </template>

            <el-table :data="menuList" row-key="path">
                <el-table-column prop="meta.title" label="菜单名称" />
                <el-table-column prop="path" label="路由路径" />
                <el-table-column label="图标">
                    <template #default="{ row }">
                        <el-icon v-if="row.meta.icon">
                            <component :is="row.meta.icon" />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="meta.permissions" label="权限要求">
                    <template #default="{ row }">
                        <el-tag v-for="role in row.meta.permissions" :key="role" class="mx-1">
                            {{ role }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row.path)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 新增/编辑对话框 -->
            <el-dialog v-model="dialogVisible" :title="dialogTitle">
                <el-form :model="currentMenu" label-width="100px">
                    <el-form-item label="菜单名称" required>
                        <el-input v-model="currentMenu.meta.title" />
                    </el-form-item>
                    <el-form-item label="路由路径" required>
                        <el-input v-model="currentMenu.path" />
                    </el-form-item>
                    <el-form-item label="选择图标">
                        <el-select v-model="currentMenu.meta.icon">
                            <el-option v-for="icon in elementIcons" :key="icon" :value="icon" :label="icon">
                                <el-icon>
                                    <component :is="icon" />
                                </el-icon>
                                <span style="margin-left:10px">{{ icon }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="权限要求">
                        <el-select v-model="currentMenu.meta.permissions" multiple placeholder="请选择">
                            <el-option v-for="role in roleOptions" :key="role" :label="role" :value="role" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitMenu">确认</el-button>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useMenuStore } from '@/stores/menu'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const menuStore = useMenuStore()

// 获取所有Element图标名称
const elementIcons = Object.keys(ElementPlusIconsVue)
// 角色选项（可从角色管理获取）
const roleOptions = ['admin', 'editor', 'user']

// 对话框状态
const dialogVisible = ref(false)
const dialogTitle = ref('新增菜单')
const currentMenu = ref({
    path: '',
    meta: {
        title: '',
        icon: '',
        permissions: []
    }
})

// 获取菜单列表
const menuList = computed(() => menuStore.menus)

const handleCreate = () => {
    currentMenu.value = {
        path: '',
        meta: {
            title: '',
            icon: '',
            permissions: []
        }
    }
    dialogTitle.value = '新增菜单'
    dialogVisible.value = true
}

const handleEdit = (menu) => {
    currentMenu.value = JSON.parse(JSON.stringify(menu))
    dialogTitle.value = '编辑菜单'
    dialogVisible.value = true
}

const submitMenu = async () => {
    await menuStore.updateMenu(currentMenu.value)
    dialogVisible.value = false
}

const handleDelete = async (path) => {
    await menuStore.deleteMenu(path)
}
</script>